<template>
	<!-- 次组件用于显示单个题目 -->
	<!-- 渲染题目详情 -->
	<view class="textDetail">
		<!-- 显示题目的题干 -->
		<view class="content-title">
			<u-parse :html="queDetail.question.queContent"></u-parse>
		</view>

		<!-- type ==  单选题 -->
		<view class="solutions" v-if='queDetail.template == 1'>
			<template v-for='subItem in queDetail.options'>
				<view class="solutions-item">
					<view class="solutions-item-single">{{subItem.optLetter}}.</view>
					<view class="solutions-item-content">{{subItem.optContent}}</view>
				</view>
			</template>
		</view>
		<!-- type == 2 多选题 -->
		<view class="solutions" v-if='queDetail.template == 2'>
			<template v-for='subItem in queDetail.options'>
				<view class="solutions-item">
					<view class="solutions-item-single">{{subItem.optLetter}}. </view>
					<view class="solutions-item-content">{{subItem.optContent}}</view>
				</view>
			</template>
		</view>
		<!-- type == 3 判断题 -->
		<!-- <view class="solutions" v-if='queDetail.queTypeName == "判断题"'>
			<template v-for='subItem in queDetail.options'>
				<view class="solutions-item">
					<view class="solutions-item-check-content">{{subItem.content}}</view>
				</view>
			</template>
		</view> -->
		<!-- type == 4 填空题 -->
		<!-- 		<view class="solutions" v-if='queDetail.queTypeName == "填空题"'>
			<editor id="fillEditor" class="content-solutions-fillItem" v-model="fillEditorValue"  placeholder="请在此处输入答案"></editor>
		</view> -->
		<!-- type == 5 简答题 -->
		<!-- 		<view class="solutions" v-if='queDetail.queTypeName == "简答题"'>
			<editor id="articleEditor" class="content-solutions-fillItem" v-model="fillEditorValue"  placeholder="请在此处输入答案"></editor>
		</view> -->
		<!-- 显示答案解析 -->
		<view class="explain" v-if='needAnalyse'>
			<view class="analyArea">
				<view class="analyTitle">正确答案：</view>
				<u-parse class="explain-result" :html="queDetail.errorQuestion?queDetail.errorQuestion.optAnswer :'暂无'"></u-parse>
			</view>
			<view class="analyArea">
				<view class="analyTitle">试题解析：</view>
				<!-- <view class="explain-content">{{queDetail.question.queAnalysis | contentFilter}}</view> -->
				<u-parse :html="queDetail.question?queDetail.question.queAnalysis :'暂无'"></u-parse>
			</view>
			<view class="analyArea">
				<view class="analyTitle">我的笔记：</view>
				<view class="noteArea">
					<view v-for="(noteItem, noteIndex) in queDetail.notes">{{noteItem.noteContent}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			queDetail: {
				type: Object,
				// default: {}
			},
			needAnalyse: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				isReviewed: true,
				fillEditorValue: '',
			}
		},
		methods: {

		},
		filters: {
			rightAnswerFilter(item) {
				if (item.type == 3) {
					switch (item.answer) {
						case 'A':
							return '对';
						case 'B':
							return '错';
					}
				}
			},
			contentFilter(item) {
				if (item == null || item.length == 0) {
					return "暂无"
				}

			}
		},
	}
</script>

<style lang="scss">
	// .page{
	// 	padding: 40rpx;
	// }
	.textDetail {
		padding: 30rpx;
		width: 700rpx;
		// padding: 10rpx 0;
		background-color: #FFFFFF;
		font-size: 32rpx;

		.solutions {
			margin: 10rpx 0;

			.solutions-item {
				display: flex;
				line-height: 50rpx;

				.solutions-item-single {
					margin-right: 10rpx;
				}
			}

			.content-solutions-fillItem {
				border: 5rpx solid $theme-color;
				border-radius: 20rpx;
				background-color: #FFFFFF;
				padding: 20rpx;
			}
		}

		.explain {
			color: $font-color-ps;
			font-size: 28rpx;

			.analyArea {
				display: flex;

				.analyTitle {
					flex-shrink: 0;
					font-weight: bold;
				}

				.explain-result {
					color: green;
					// font-weight: bold;
				}

				.noteArea {
					display: flex;
					flex-direction: column;
				}
			}
		}
		
	}
</style>
